<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery\jquery.js"></script>
    <style>
        *{
            padding: 0px;
            margin: 0px;
            /* box-sizing: border-box; */
        }
        #bg{
            margin: 10px;
        }
        #bg ul{
            list-style: none;
            display: table;
        }
        li{
            width: 100px;
            height: 40px;
            float: left;
            /* padding-left: 10px; */
            /* margin-right: -1px; */
            border: 1px solid hotpink;
            background: lightgray;
            color: red;
            text-align: center;
            line-height: 40px;
            text-shadow: 1px 0.5px;
            cursor: pointer;
        }
        .coc{
            width: 306px;
            height: 150px;
            border: 1px salmon solid;
            display: none;
        }
        .on{
            display: block;
        }
        .tab_on{
            background-color: rgb(182, 205, 50);
        }
    </style>
</head>
<body>
    <div id="bg">
    <ul>
        <li>最新</li>
        <li class="tab_on">热门</li>
        <li>新闻</li>
    </ul>
    <div class="coc">123</div>
    <div class="coc on">456</div>
    <div class="coc">789</div>
    </div>
    <script>
        $(function(){
            //绘li添加点击事件，当前li变色，
            $("li").click(function(){
                //当前li变蓝色，其他变灰色 
                $(this).addClass("tab_on").siblings().removeClass("tab_on")
                //将所有的div隐藏，在将对应的div显示出来
                var n=$(this).index();

                // $(".coc").hide().eq(n).show();
                $(".coc").css("display","none").eq(n).css("display","block");

            })

        })

        // $("li").click(function(){
        //     // alert($(this).index()); //获取索引号

        //     //获取点击的元素给其添加样式，讲其兄弟元素的样式移除
        //     $(this).addClass("tab_on").siblings().removeClass("tab_on");
        //     //获取选中元素的下标
        //     var index = $(this).index();
        //     $(this).parent().siblings().children().eq(index).addClass("tab_on").siblings().removeClass("tab_on");

        // })
    </script>
</body>
</html>